import React from 'react';
import { motion } from 'framer-motion';
import { useThemeStore } from '../../stores/themeStore';
import { getTheme } from '../../theme/config';

interface CustomMenuItemProps {
  icon?: React.ReactNode;
  children: React.ReactNode;
  onClick?: (e?: React.MouseEvent) => void;
  disabled?: boolean;
  className?: string;
  style?: React.CSSProperties;
}

const CustomMenuItem: React.FC<CustomMenuItemProps> = ({
  icon,
  children,
  onClick,
  disabled = false,
  className = '',
  style = {}
}) => {
  const { mode } = useThemeStore();
  const theme = getTheme(mode);

  const handleClick = (e: React.MouseEvent) => {
    if (!disabled && onClick) {
      onClick(e);
    }
  };

  return (
    <motion.div
      className={`custom-menu-item ${className}`}
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-start',
        padding: '2px 16px',
        cursor: disabled ? 'not-allowed' : 'pointer',
        background: 'transparent',
        transition: 'all 0.3s ease',
        color: disabled ? theme.textTertiary : theme.dropdownTextColor,
        ...style
      }}
      whileHover={!disabled ? {
        backgroundColor: theme.dropdownHoverBackground,
        x: 4
      } : {}}
      whileTap={!disabled ? { scale: 0.98 } : {}}
      onClick={handleClick}
    >
      {icon && (
        <div style={{ 
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: '16px',
          marginRight: '12px',
          color: disabled ? theme.textTertiary : theme.glowColor,
          width: '20px',
          height: '20px',
          flexShrink: 0
        }}>
          {icon}
        </div>
      )}
      <div style={{ 
        fontWeight: '500',
        fontSize: '14px',
        display: 'flex',
        alignItems: 'center',
        flex: 1,
        minWidth: 0
      }}>
        {children}
      </div>
    </motion.div>
  );
};

export default CustomMenuItem;